<!--
 * @Author: 孙文豪
 * @Description: 
 * @Date: 2024-06-26 17:02:53
 * @LastEditTime: 2024-06-27 17:26:57
 * @LastEditors: 孙文豪
-->
<template>
  <div class="order-details-box">
    <span class="icon-JXC-qiankuanzhong iconfont" v-if="targetCustomer.arrears > 0"></span>
    <div class="order-details-body">
      <h4>客户信息</h4>
      <div class="customer-info">
        <p class="customer-info-line">
          <span class="title">客户名称</span
          ><span class="text">{{ targetCustomer.customerName }}</span>
          <span class="title">客户电话</span
          ><span class="text">{{ targetCustomer.customerPhone || '-' }}</span>
        </p>
        <p class="customer-info-line">
          <span class="title">客户地址</span
          ><span class="text">{{ targetCustomer.customerAddress || '-' }}</span>
        </p>
        <p class="customer-info-line">
          <span class="title">订单数量</span
          ><span class="text">{{ targetCustomer.transactionNum || '0' }}</span>
          <span class="title">累计消费</span
          ><span class="text">{{ targetCustomer.totalAmount || '0' }}</span>
          <span class="title">总欠款额</span
          ><span class="text" :class="{ red: targetCustomer.arrears > 0 }">{{
            targetCustomer.arrears || '0'
          }}</span>
        </p>
        <p class="customer-remarks">
          {{ targetCustomer.customerRemarks || '暂无备注信息' }}
        </p>
      </div>
      <h4>订单详情</h4>
      <div class="details-info">
        <p>订单编号：{{ detailsObject.customerId }}</p>
        <p>
          下单日期：{{ detailsObject.salesDateStr }} {{ detailsObject.week }}
          {{ detailsObject.salesTimeStr }}
        </p>
        <p>
          订单状态：<span
            class="status"
            :class="{ red: detailsObject.billingStatus === '1' }"
            >{{ detailsObject.billingStatusText }}</span
          >
        </p>
      </div>
      <h4>清单</h4>
      <div class="order-details-item-title">
        <p
          class="item-title"
          v-for="item in salesListConfig"
          :key="item.code"
          :style="{ flex: item.share, width: item.width }"
        >
          {{ item.name }}
        </p>
      </div>
      <div class="order-details-list">
        <div
          class="order-details-item"
          v-for="(item, index) in detailsObject.salesList"
          :key="index"
        >
          <p
            class="item-info"
            v-for="i in salesListConfig"
            :key="i.code"
            :style="{ flex: i.share, width: i.width }"
          >
            <span v-if="i.code == 'index'">{{ index + 1 }}</span>
            <span v-else-if="i.code == 'commodityNameId'">{{
              item.commodityName
            }}</span>
            <span v-else>{{ item[i.code] || '-' }}</span>
          </p>
        </div>
      </div>
      <h4>当前订单总计（成本、收益、利润率等信息）</h4>
      <div class="customer-info">
        <p class="customer-info-line">
          <span class="title">应收金额</span
          ><span class="text">{{ detailsObject.totalAmount || '-' }}</span>
          <span class="title">应得收益</span
          ><span class="text">{{ detailsObject.totalProfit || '-' }}</span>
          <span class="title">总成本</span
          ><span class="text">{{ detailsObject.totalCost }}</span>
          <span class="title">利润率</span
          ><span class="text"
            >{{
              roundToTwoDecimals(
                (detailsObject.totalProfit / detailsObject.totalCost) * 100
              )
            }}%</span
          >
        </p>

        <p class="customer-info-line">
          <span class="title">实收金额</span
          ><span class="text">{{ detailsObject.actualAmount }}</span>
          <span class="title">实际收益</span
          ><span class="text">{{
            detailsObject.actualAmountChangeNum + detailsObject.totalProfit
          }}</span>
          <span class="title">收益变化</span
          ><span
            class="text"
            :class="detailsObject.actualAmountChangeNum < 0 ? 'red' : 'greenbg'"
            >{{ addSymbols(detailsObject.actualAmountChangeNum) }}</span
          >
          <span class="title">实利润率</span
          ><span
            class="text"
            :class="detailsObject.actualAmountChangeNum < 0 ? 'red' : 'greenbg'"
            >{{
              roundToTwoDecimals(
                ((detailsObject.actualAmountChangeNum +
                  detailsObject.totalProfit) /
                  detailsObject.totalCost) *
                  100
              )
            }}%</span
          >
        </p>
        <p class="h-r"></p>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, watch } from 'vue';
import { salesListConfig } from './task.js';
import { setLS, getLS, roundToTwoDecimals } from '@/utils/common.js';

export default {
  name: '',
  props: {
    detailsObject: {
      type: Object,
      default: () => {}
    }
  },
  setup(props, ctx) {
    const data = reactive({
      salesListConfig,
      LSData: {},
      customOptions: [],
      targetCustomer: {}
    });
    onBeforeMount(() => {});
    onMounted(() => {
      data.salesListConfig = data.salesListConfig.slice(
        0,
        data.salesListConfig.length - 3
      );
      getCustomer();
    });
    // 监听订单变化
    watch(
      () => props.detailsObject,
      (newVal, oldVal) => {
        getCustomer();
      },
      {
        deep: true
      }
    );
    //计算实际收益变化
    const addSymbols = (num) => {
      return num > 0 ? '+' + num : num;
    };
    // 获取客户信息
    const getCustomer = () => {
      data.LSData = getLS('PURCHASE_AND_CUSTOMER') || {};
      if (data.LSData && data.LSData.customer.length > 0) {
        data.customOptions = data.LSData.customer;
      }
      data.targetCustomer = data.customOptions.filter(
        (item) => item.id === props.detailsObject.customerId
      )[0];
      console.log('订单客户信息', data.targetCustomer);
    };
    return {
      addSymbols,
      roundToTwoDecimals,
      ...toRefs(data)
    };
  }
};
</script>
<style scoped lang="less">
.order-details-box {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  .icon-JXC-qiankuanzhong{
      position: absolute;
      right:-30px;;
      top:120px;
      font-size: 120px;
      color:red;
    }
  .order-details-body {
    margin-top: 10px;
    .details-info {
      margin-top: 5px;
      font-size: 14px;
      color: @HSB;
      line-height: 24px;
      margin-bottom:15px;
      .status {
        background: green;
        color: #fff;
        padding: 0 10px;
        border-radius: 5px;
        cursor: pointer;
        &.red {
          background: red;
          font-weight: 700;
        }
        &:hover {
          opacity: 0.8;
        }
      }
    }
    .customer-info {
      margin-top: 5px;
      .customer-info-line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid @HSD;
        font-size: 14px;
        .title {
          width: 80px;
          background: @HSE;
          padding: 0 10px;
          box-sizing: border-box;
          text-align: center;
          line-height: 28px;
          color: @HSB;
          border-left: 1px solid @HSD;
          border-right: 1px solid @HSD;
        }
        .text {
          flex: 1;
          color: @HSB;
          padding: 0 10px;
          box-sizing: border-box;
          line-height: 28px;
          border-left: 1px solid @HSD;
          border-right: 1px solid @HSD;
          &.red {
            color: red;
          }
          &.greenbg {
            background: green;
            color: #fff;
          }
        }
      }
      .h-r {
        height: 1px;
        background: @HSD;
      }
      .customer-remarks {
        padding: 5px 10px;
        border: 1px solid @HSD;
        margin-bottom: 40px;
        font-size: 14px;
        color: @HSB;
      }
    }
    .order-details-item-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      line-height: 30px;
      background: @HSE;
      margin-top: 5px;
      .item-title {
        color: @HSB;
        text-align: center;
        flex: 1;
      }
    }
    .order-details-list {
      max-height: 300px;
      overflow: auto;
      margin-bottom: 15px;
      .order-details-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        line-height: 30px;

        .item-info {
          color: @HSB;
          border: 1px solid @HSE;
          border-top: none;
          text-align: center;
          flex: 1;
        }
      }
    }
  }
}
</style>
